{% extends "view/admin/ext_admin.html" %}

{% block extadmin %}
<section class="panel panel-default">
    <div class="panel-heading clearfix">
        <ul class="nav nav-tabs pull-left">
            <li ><a href="/{{ctx.controller}}/temp"  class="grouplist"> 模板设置</a></li>
            <li class="active"><a href="javascript:void(0)"  class="grouplist"> {{controller.meta_title}}</a></li>
        </ul>
    </div>
    <div class="panel-body">
        <form id="ajaxForm" method="post" class="form-horizontal" action="/{{ctx.controller}}/addtemp" data-validate="parsley">
            <div class="form-group">
                <label class="col-sm-2 control-label">模板文件名</label>

                <div class="col-sm-10">

                    <div class="row">
                        <div class="col-md-4">
                            <input type="text" class="form-control" name="name" value="" data-required="true" data-Remote="/admin/public/remote/?table=ext_ad_temp">
                        </div>
                        <div class="col-md-12">
                            <span class="help-block m-b-none text-muted"><i class="fa fa-info-circle text-info"></i> 模板文件名，英文必填</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">模板中文名</label>

                <div class="col-sm-10">
                    <div class="row">
                        <div class="col-md-4">
                            <input type="text" class="form-control" name="title" value=""
                                   data-required="true" >
                        </div>
                        <div class="col-md-12">
                            <span class="help-block m-b-none text-muted"><i class="fa fa-info-circle text-info"></i> 中文，必填</span>
                        </div>
                    </div>

                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">是否出现以下属性</label>

                <div class="col-sm-10">
                    <div class="row">
                        <div class="col-md-4 ">
                            <label class="radio-inline i-checks">
                                <input type="radio" value="0" name="align" checked><i></i> 无
                            </label>
                            <label class="radio-inline i-checks">
                                <input type="radio" value="1" name="align" ><i></i> 全屏居中
                            </label>
                            <label class="radio-inline i-checks">
                                <input type="radio" value="2" name="align" ><i></i> 随屏滚动
                            </label>
                        </div>
                        <div class="col-md-12">
                            <span class="help-block m-b-none text-muted"><i class="fa fa-info-circle text-info"></i> 广告类型为全屏剧中或者随屏滚动时才选择此项</span>

                        </div>

                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">是否设置广告位位置</label>

                <div class="col-sm-10">
                    <div class="row">
                        <div class="col-md-4 ">
                            <label class="radio-inline i-checks">
                                <input type="radio" value="0" name="padding" checked><i></i> 否
                            </label>
                            <label class="radio-inline i-checks">
                                <input type="radio" value="1" name="padding" ><i></i> 是
                            </label>
                        </div>
                        <div class="col-md-12">
                            <span class="help-block m-b-none text-muted"><i class="fa fa-info-circle text-info"></i>广告的左边距，右边距，全屏居中，随屏滚动时才会有效</span>

                        </div>

                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">是否设置广告位尺寸</label>

                <div class="col-sm-10">
                    <div class="row">
                        <div class="col-md-4 ">
                            <label class="radio-inline i-checks">
                                <input type="radio" value="0" name="size" checked><i></i> 否
                            </label>
                            <label class="radio-inline i-checks">
                                <input type="radio" value="1" name="size" ><i></i> 是
                            </label>
                        </div>
                        <div class="col-md-12">
                            <span class="help-block m-b-none text-muted"><i class="fa fa-info-circle text-info"></i>广告位尺寸的大小设置</span>

                        </div>

                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">广告位下的广告</label>

                <div class="col-sm-10">
                    <div class="row">
                        <div class="col-md-4 ">
                            <label class="radio-inline i-checks">
                                <input type="radio" value="0" name="option" checked><i></i> 按排序列出一个
                            </label>
                            <label class="radio-inline i-checks">
                                <input type="radio" value="1" name="option" ><i></i> 全部列出
                            </label>
                        </div>
                        {#
                        <div class="col-md-12">
                            <span class="help-block m-b-none text-muted"><i class="fa fa-info-circle text-info"></i> 广告位尺寸的大小设置</span>

                        </div>
                        #}
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">可用广告类型</label>

                <div class="col-sm-10">
                    <div class="row">
                        <div class="col-sm-10">
                            <label class="checkbox-inline i-checks">
                                <input type="checkbox" value="1" name="type_images"><i></i> 图片
                            </label>
                            {#
                            <label class="checkbox-inline i-checks">
                                <input type="checkbox" value="1" name="type_flash"><i></i> 动画
                            </label>
                            #}
                            <label class="checkbox-inline i-checks">
                                <input type="checkbox" value="1" name="type_text"><i></i> 文字
                            </label>
                            <label class="checkbox-inline i-checks">
                                <input type="checkbox" value="1" name="type_code"><i></i> 代码
                            </label>
                        </div>
                        {#
                        <div class="col-md-12">
                            <span class="help-block m-b-none text-muted"><i class="fa fa-info-circle text-info"></i> 广告位尺寸的大小设置</span>

                        </div>
                        #}
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">一次最多添加的图片等元素数量</label>

                <div class="col-sm-10">
                    <div class="row">
                        <div class="col-md-4">
                            <input type="text" class="form-control" name="num" value="1" data-required="true" >
                        </div>
                        {#
                        <div class="col-md-12">
                            <span class="help-block m-b-none text-muted"><i class="fa fa-info-circle text-info"></i> 广告位尺寸的大小设置</span>

                        </div>
                        #}
                    </div>
                </div>
            </div>
            <div id="layout " class="form-group" style="margin-bottom: 0">
                <section class="panel panel-default margin-0" style="margin-bottom: 0">
                    <header class="panel-heading font-bold">模板代码</header>
                    <div class="row wrapper">
                        <div class="col-md-12">
                            <p><code>图片类型</code>模板支持变量:循环:<code>{loop}{/loop}</code>,广告图片:<code>[att|get_pic]</code>,链接地址:<code>[url]</code>,广告文字:<code>[alt]</code>,广告宽:<code>[width]</code>,广告高:<code>[height]</code></p>
                            <p><code>文字类型</code>模板支持变量:循环:<code>{loop}{/loop}</code>,文字内容:<code>[alt]</code>,链接地址:<code>[url]</code>,文字简介:<code>[info]</code>,文字图标:<code>[ico]</code>,广告宽:<code>[width]</code>,广告高:<code>[height]</code></p>
                            <p><code>代码类型</code>模板支持变量:html代码:<code>[code]</code></p>

                        </div>
                    </div>
                    <div class="panel-body" style="padding: 0">
                        <div id="codes" class="hide">
                            <textarea id="html-code">{{temp.html}}</textarea>
                        </div>
                        <div id="test-editormd" style="margin: 0">
                            <textarea style="display:none;" name="temp"></textarea>
                        </div>
                    </div>
                </section>


            </div>
            <div class="form-group form-submit">
                <div class="col-sm-4 col-sm-offset-2">
                    <button class="btn btn-primary btn-s-md ajax-post" type="submit" target-form="form-horizontal">确定</button>
                    <button class="btn btn-default" onclick="javascript:history.back(-1);return false;"
                            type="submit">返回
                    </button>

                </div>
            </div>
        </form>
    </div>
</section>

{% endblock%}
{% block style %}
{{ super() }}
<link rel="stylesheet" href="/static/admin/editormd/editormd.min.css" type="text/css">
{% endblock%}
{% block script%}
{{ super() }}
<script src="/static/admin/js/parsley/parsley.min.js"></script>
<script src="/static/admin/js/parsley/parsley.extend.js"></script>
<script src="/static/admin/editormd/editormd.min.js"></script>
<script type="text/javascript">
    var testEditor;

    function getCodeValue() {
        return (localStorage.modeName) ? $("#" + localStorage.modeName.replace("text/", "").replace("c/c++", "cpp") + "-code").val() : $("#html-code").val();
    }

    $(function () {
        testEditor = editormd("test-editormd", {
            width: "100%",
            height: 340,
            watch: false,
            toolbar: false,
            codeFold: true,
            searchReplace: true,
            placeholder: "把模板代码复制到这里...",
            value: getCodeValue(),
            theme: (localStorage.theme) ? localStorage.theme : "default",
            mode: (localStorage.mode) ? localStorage.mode : "text/html",
            path: '/static/admin/editormd/lib/'
        });

        $("#get-code-btn").bind("click", function () {
            alert(testEditor.getValue());
        });
    });
</script>
{% endblock%}